<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">订单管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">改单记录</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <el-collapse-transition>
      <div class="inquiry" v-show="!show3">
        <div class="header">
          <span>数据查询</span>
          <p @click="show3 = true" v-show="!show3">收起</p>
          <p @click="show3 = false" v-show="show3">展开</p>
        </div>
        <el-form
          :inline="true"
          ref="form"
          :model="queryForm"
          label-width=""
          size="mini"
        >
          <el-form-item label="信息">
            <el-input
              placeholder="请输入客户手机号码/姓名"
              v-model="queryForm.info"
            ></el-input>
          </el-form-item>

          <el-form-item label="订单编号">
            <el-input
              v-model="queryForm.identifier"
              placeholder="请输入订单编号"
            ></el-input>
          </el-form-item>

          <el-form-item label="部门选择">
            <el-cascader
              v-model="queryForm.orgName"
              :options="options"
              :props="{
                checkStrictly: true,
                label: 'orgName',
                value: 'orgCode',
                children: 'children',
              }"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>

          <el-form-item label="客服">
            <el-select
              v-model="queryForm.service"
              clearable
              filterable
              placeholder="请选择客服"
              default-first-option
            >
              <el-option
                v-for="items in customer"
                :key="items.id"
                :label="items.reallyName"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="订单状态">
            <el-select
              v-model="queryForm.state"
              placeholder="选择订单状态"
              default-first-option
            >
              <el-option
                v-for="itemsS in status"
                :key="itemsS.dictId"
                :label="itemsS.dictName"
                :value="itemsS.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <div class="selectDate">
            <span>时间</span>
            <div class="picker">
              <el-date-picker
                v-model="date"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
                >>
              </el-date-picker>
            </div>
          </div>
          <!-- <div class="box"> -->

          <el-form-item label="地区">
            <levelAddr
              class="addressContent"
              :province="queryForm.province"
              :city="queryForm.city"
              :area="queryForm.area"
              @updateprovice="getProvince"
              @updatecity="getCity"
              @updatearea="getArea"
            ></levelAddr>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="searchEvent()"
              v-on:keyup.enter="searchEvent"
              >搜索</el-button
            >
            <el-button plain @click="reset">重置</el-button>
          </el-form-item>
          <!-- </div> -->
        </el-form>
      </div>
    </el-collapse-transition>
    <div class="btns" style="margin: 10px">
      <div>
        <el-button
          size="mini"
          type="danger"
          plain
          @click="$refs.xTable.setAllRowExpand(true)"
          >展示</el-button
        >
        <el-button
          size="mini"
          type="warning"
          plain
          @click="$refs.xTable.clearRowExpand()"
          >关闭</el-button
        >
      </div>

      <el-button size="mini" type="primary" v-if="show3" @click="show3 = false"
        >搜索展开</el-button
      >
    </div>

    <div class="table">
      <vxe-table
        ref="xTable"
        class="tableCont"
        :data="tableData.list"
        :expand-config="{ expandAll: true }"
        :sort-config="{ trigger: 'cell' }"
        align="center"
      >
        <vxe-table-column type="seq" title="序号" width="50"></vxe-table-column>
        <vxe-table-column type="expand" width="55">
          <template v-slot:content="{ row }">
            <div @click="toDetail(row)">
              <el-form class="demo-table-expand">
                <el-form-item>
                  <p v-for="items in row.orderCommodityList" :key="items.id">
                    <span>{{ items.name }}</span>
                    <span>
                      {{ items.price }} × {{ items.number }} =
                      {{ items.total }} 元</span
                    >
                  </p>
                </el-form-item>
                <el-form-item v-if="!is_null(row.orderComplimentaryList)">
                  <span style="color: red">附属品：</span>
                  <p
                    class="complimentary"
                    v-for="items in row.orderComplimentaryList"
                    :key="items.id"
                  >
                    <span>{{ items.complimentaryName }}</span>
                    <span>
                      {{ items.price }} × {{ items.number }} =
                      {{ items.total }} 元</span
                    >
                  </p>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </vxe-table-column>
        <vxe-table-column
          title="订单编号"
          field="orderUser.orderIdStr"
        ></vxe-table-column>
        <vxe-table-column
          title="下单时间"
          field="orderUser.createdTime"
        ></vxe-table-column>
        <vxe-table-column
          title="客户"
          field="orderUser.addressName"
          width="150"
        ></vxe-table-column>
        <vxe-table-column
          title="订单状态"
          field="orderUser.orderType"
        ></vxe-table-column>
        <vxe-table-column
          title="总计"
          field="orderUser.total"
          width="100"
        ></vxe-table-column>
        <vxe-table-column title="备注" show-overflow>
          <template slot-scope="props">
            <span v-if="is_null(props.row.orderUser.comment)">--</span>
            <span v-if="!is_null(props.row.orderUser.comment)">{{
              props.row.orderUser.comment
            }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作">
          <template slot-scope="props">
            <div class="btn">
              <!-- <span  v-if='props.row.orderUser.createdBy == user_id' @click='fixOrder(props.row)'>修改</span> -->
              <span @click="toDetail(props.row)">详情</span>
              <!-- 只有员工有删除 -->
              <!-- <span v-if='props.row.orderUser.createdBy == user_id'  @click='delectRow(props.row,props.$index)'>关闭订单</span> -->
              <!-- <span v-if='props.row.orderUser.createdBy != user_id' @click="trueEvent(props.row);">办理</span> -->
              <!-- 员工没有办理 -->
            </div>
          </template>
        </vxe-table-column>
      </vxe-table>
      <!-- 分页start -->
      <div class="page" v-if="tableData.totalNum > 0">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.totalNum"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 分页end -->
    </div>
  </div>
</template>

<script>
import levelAddr from "@/components/levelAddr";
export default {
  components: {
    levelAddr,
  },
  data () {
    return {
      date: "",
      expends: [],
      queryForm: {
        info: "",
        state: "",
        type: "",
        identifier: "",
        province: "",
        city: "",
        area: "",
        service: "",
        orgName: "",
      },
      currentPage1: 1,
      pageSize: 10,
      tableData: [],
      expandRowKeys: [],
      customer: [],
      status: [],
      beginTime: "",
      endTime: "",
      height: "500px",
      options: [],
      show3: false,
    };
  },
  created () {
    this.listAxios("1");
    this.customerlist();
    this.orderStatus();
    this.department();
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null;
    next();
  },
  mounted () {
    let self = this;
    let ph = document.documentElement.clientHeight;
    self.height =
      ph -
      (260 + document.getElementsByClassName("el-form")[0].clientHeight) +
      "px";
    window.onresize = function () {
      let ph = document.documentElement.clientHeight;
      self.height =
        ph -
        (260 + document.getElementsByClassName("el-form")[0].clientHeight) +
        "px";
    };
  },
  methods: {
    // 部门选择列表
    department () {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    listAxios (pageNo) {
      if (this.date) {
        this.beginTime = this.date[0] + " 00:00:00";
        this.endTime = this.date[1] + " 23:59:59";
      }
      this.axios
        .post("/order/order/change/selectorderchangelist", {
          addressName:
            this.queryForm.province + this.queryForm.city + this.queryForm.area,
          customerId: this.queryForm.service,
          dataScope: "",
          endTime: this.endTime,
          keyword: this.queryForm.info,
          orderId: this.queryForm.identifier,
          orderType: this.queryForm.state,
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          startTime: this.beginTime,
          userId: "", // sessionStorage.getItem('user_id')
          userType: this.queryForm.orgName[this.queryForm.orgName.length - 1],
        })
        .then((res) => {
          // console.log('改单列表');
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
            // this.getExpends();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 数据对比
    polliingEvent () {
      // this.axios('/order')
    },
    toDetail (row) {
      this.$router.push({
        name: "fix_orderDetail",
        query: {
          orderId: row.orderUser.orderIdStr + "",
        },
      });
    },
    handleCurrentChange (val) {
      this.currentPage1 = val;
      this.listAxios();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.listAxios();
    },
    getProvince (val) {
      this.queryForm.province = val;
      this.queryForm.city = "";
      this.queryForm.area = "";
    },
    getCity (val) {
      this.queryForm.city = val;
      this.queryForm.area = "";
    },
    getArea (val) {
      this.queryForm.area = val;
    },
    // 客户下拉框数据
    customerlist () {
      this.axios
        .get(
          "/sys/v1/user/employee/by/sales/authority?salesAuthorityId=" +
          JSON.parse(sessionStorage.getItem("salesAuthorityId").split(",")),
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.customer = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 订单状态
    orderStatus () {
      this.axios
        .get("/sys/v1/common/by/group?groupId=" + "order_type")
        .then((res) => {
          if (res.code == 0) {
            this.status = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 重置搜索数据
    reset () {
      this.queryForm = {
        info: "",
        state: "",
        type: "",
        identifier: "",
        province: "",
        city: "",
        area: "",
        service: "",
        orgName: "",
      };
      (this.currentPage1 = 1), (this.pageSize = 10);
      this.listAxios("1");
    },
    searchEvent () {
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios("1");
    },
    is_null (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.characteristic {
  color: #ff0000;
}
/deep/.el-form-item--mini.el-form-item {
  margin-bottom: 10px;
}
/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

/deep/.vxe-cell--title {
  color: #2d7edf;
}

/deep/.table .vxe-body--row {
  background: #ebf0f9;
  color: #000;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 200px;
  color: #99a9bf;
}
.header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  span {
    font-size: 15px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

.inquiry {
  background: #fff;
  padding: 10px 10px 0 10px;
}

/deep/.el-table__expand-icon > .el-icon {
  color: #ccc;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.table {
  // margin: 20px 0;
  /deep/ .el-input--suffix .el-input__inner {
    background: #409eff;
    color: #fff;
    width: 104px;
    box-shadow: none;
  }

  /deep/ .el-button {
    padding: 8px 10px;
  }
}

/deep/.el-table thead {
  color: #2d7edf;
  text-align: center;

  .cell {
    text-align: center;
  }
}

.operation {
  display: inline-block;
  margin-left: 20px;

  img {
    width: 20px;
    height: 20px;
  }
}

/deep/.el-table td,
.el-table th {
  text-align: center;
}
.tableCont {
  margin-bottom: 25px;
}
.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  text-align: left;
}

/deep/.el-table__row:hover {
  color: rgb(45, 125, 223);
}

.btn {
  span {
    display: inline-block;
    color: rgb(45, 125, 223);
    margin-right: 10px;
  }
}

.btn:hover {
  cursor: pointer;
}
.btns {
  display: flex;
  justify-content: space-between;
}
</style>
